<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
        *{
            padding:0px;
            margin:0px ;
        }
        .dvtime{
            width:50%;
            height: 60px;
            line-height: 60px;
            background-color: #7cd3b1;
            margin: 0px auto;
            margin-bottom:1px;
            color: white;
        }
        .fr{
            float: right;
            margin-right: 20px;
        }
        .mouses{
            width: 50%;
            margin: 0px  auto;
        }
        .mouse{
            width: 20%;
            height: auto;
            float: left;
        }
        img{
            cursor: pointer;
            -webkit-user-drag: none; /* Chrome, Safari, Opera */
            user-drag: none; /* 非标准属性 */
        }
        .btnStart{
            width:50%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #7cd3b1;
            margin:0px auto;
            color: white;
            font-size: 20px;
            clear: both;
            cursor: pointer;
        }
    </style>

    <script src="../js/jquery-3.3.1.min.js"></script>

    <script>
        var kitnum=0;

        $(function(){
            $("img").prop("draggable",false);

            $(".btnStart").click(function(){

                kitnum=0;

                $(".time").text("60");

                //将以前的任务全部取消

                setInterval(function(){
                    var time=parseInt($(".time").text());
                    time--;
                    $(".time").text(time);

                    if(time==0){
                        //将任务全部取消
                    }

                },1000);

                //地鼠出来
                // setInterval(makemouse,500);
            });


            $(".mouse").click(function(){
                //判断地鼠有没有出来
                    //改变图片，被打图片
                    //计数+1
                    //显示计数
            });




            //地鼠出来方法
            function makemouse(){

                var nums=$(".mouse").length;

                //根据nums产生随机数

                // $(".mouse").eq(随机数)改变图片为出来的图片

                // setTimeout(地鼠回去,根据选择等级回去)

            }
        });
    </script>



</head>
<body>
    <div class="dvtime">
        &nbsp;&nbsp;&nbsp;难易程度设置
        <select  class="easy">
            <option value="2000"> 简单</option>
            <option  value="1000">一般</option>
            <option  value="100">难 </option>
        </select>
        <div class="fr">
            打中<label  class="nums"> 0</label> 个
            <label class="time">60</label>秒
        </div>
    </div>
    <div class="mouses">
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
        <img  src="../image/dishu2.png" class="mouse" />
    </div>
    <div  class="btnStart">开始游戏</div>
</body>
</html>